<template>
  <div>
    <!-- 头部 -->
    <MyHeader :background="'#ca1dff'" :fontColor="'white'" title="TabBar案例"></MyHeader>
    <!-- 内容 -->
    <div class="main">
      <component :is="comName"></component>
    </div>
    <!-- 底部导航 -->
    <MyTabBar :tabBarList='tabList' @changeConName='comName = $event'></MyTabBar>
  </div>
</template>


<script> 
/* 
1. 铺设底部导航的数据结构- 父传子
2. tabBar的选项高亮
3. 通过底部导航的切换,使用导尿管太组件切换内容部分
  3.1 引入组件并注册
  3.2 通过component v-bind:is 来设置组件切换变量
  3.3 子组件切换不同选项是, 主动茶法父组件中的定义的自定义事件, 去修改comName动态组件的名称
4. 通过axios获取数据
  4.1 全局配置axios
  4.2 在 created mounted 中查找数据, 并把数据赋值给data中的list变量中
  4.3 遍历渲染页面结构
5. 通过具名作用于插槽, 在父组件中渲染表格内容
6. 列表项删除
  6.1 绑定删除按钮点击事件
  6.2 通过id进行删除

*/
import MyHeader from './components/MyHeader.vue';
import MyTabBar from './components/MyTabBar.vue';
import MyGoodsList from './views/MyGoodsList.vue'
import MyGoodsSearch from './views/MyGoodsSearch.vue'
import MyUserInfo from './views/MyUserInfo.vue'

export default {
  name:'tabBar',
  components: {
    MyHeader,
    MyTabBar,
    MyGoodsList,
    MyGoodsSearch,
    MyUserInfo
  },
  data() {
    return {
      comName: "MyGoodsList", // 默认显示的组件
      tabList: [ // 底部导航的数据
        {
          iconText: "icon-shangpinliebiao",
          text: "商品列表",
         componentName: "MyGoodsList",
        },
        {
          iconText: "icon-sousuo",
          text: "商品搜索",
          componentName: "MyGoodsSearch",
        },
        {
          iconText: "icon-user",
          text: "我的信息",
          componentName: "MyUserInfo",
        },
      ],
    };
  },
  methods:{

  }
}
</script>

<style scoped>
.main{
  background-image:url('../public/image/u=2185853785,3323048027&fm=253&fmt=auto&app=138&f=JPEG.webp');
  background-repeat: no-repeat;
  background-size: cover;
  padding-top: 45px;
  padding-bottom: 51px;
}
</style>